<!--
<template>
  <div class="back">
    <div class="top">
      <div>大厅已服务监视 {{watchTime.toFixed(1)}} 小时 (h)</div>
      <div class="title">资源共享监视平台</div>
      <div class="time">
        <div>{{time}}</div>
        <div>{{date}}</div>
      </div>
      <div @click="toPageBack">返回</div>
    </div>
    <el-row>
      <el-col :span="15">
        <div class="item-left-top">
          <div><chart2 :width='380' :height='250' :leftText="chart2Text" :digitalData="digitalData"
                       style="padding-top: 20px;"></chart2></div>
          <div>
            <div>轮播广告图点击量</div>
            <div>100</div>
            <div>昨日点击&nbsp;&nbsp;&nbsp;100</div>
            <div>对比点击&nbsp;&nbsp;&nbsp;0</div>
          </div>
          <div>
            <div>在线用户</div>
            <div>100</div>
            <div>平台资源数&nbsp;&nbsp;&nbsp;100</div>
            <div>今日资源点击量&nbsp;&nbsp;90008</div>
          </div>
        </div>
        <div class="item-left-bottom">
          <div>
            <p>活跃用户前五所在城市</p>
            <chart3 :width='340' :height='340' :radius='80' :leftText="chart3Text" :digitalData="digitalData2"></chart3>
          </div>
          <div>
            <p>活跃用户前五所在城市</p>
            <table border="1" cellpadding="0" cellspacing="0" width="90%" class="table1">
              <tr height="50px" align="center" style="font-size:15px;">
                <td>分类</td>
                <td>名称</td>
                <td>下载量</td>
              </tr>
              <tr v-for="(item, index) in tableData1" :key="index" height="40px" align="center">
                <td>{{item.sortName}}</td>
                <td>{{item.title}}</td>
                <td>{{item.downloadNum}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="item-right">
          <p>近七天资源下载量</p>
          <chart1 :width='400' :height='280' :xAxisText="xAxisText1"
                  :xFontColor="'#FFFFFF'" :digitalData="digitalData1"></chart1>
          <p>排名前 8 资源 <br> 更新于2020-06-11</p>
          <table border="1" cellpadding="0" cellspacing="0" width="90%" class="table2">
            <tr height="50px" align="center" style="font-size:15px;">
              <td>分类</td>
              <td>名称</td>
              <td>下载量</td>
            </tr>
            <tr v-for="(item, index) in tableData1" :key="index" height="40px" align="center">
              <td>{{item.sortName}}</td>
              <td>{{item.title}}</td>
              <td>{{item.downloadNum}}</td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import chart1 from '@/components/Echart1'
import chart2 from '@/components/Echart2'
import chart3 from '@/components/Echart3'
export default {
  components: {
    chart1,
    chart2,
    chart3
  },
  data () {
    return {
      screenAll: 0, // 0退出全屏, 1全屏
      time: '',
      watchTime: 0,
      digitalData1: [1, 2, 3, 4, 10, 5, 1],
      xAxisText1: ['07-18', '07-19', '07-20', '07-21', '07-22', '07-23', '07-24'],
      chart2Text: ['广州市', '佛山市', '深圳市', '上海市', '北京市'],
      digitalData: [
        {
          value: 200,
          name: '广州市'
        },
        {
          value: 100,
          name: '佛山市'
        },
        {
          value: 100,
          name: '深圳市'
        },
        {
          value: 50,
          name: '上海市'
        },
        {
          value: 50,
          name: '北京市'
        }
      ],
      chart3Text: ['广州市', '佛山市', '深圳市', '上海市', '北京市'],
      digitalData2: [
        {
          value: 200,
          name: '广州市'
        },
        {
          value: 100,
          name: '佛山市'
        },
        {
          value: 100,
          name: '深圳市'
        },
        {
          value: 50,
          name: '上海市'
        },
        {
          value: 50,
          name: '北京市'
        }
      ],
      tableData1: [{
        sortName: '电影',
        title: '唐人街探案 II',
        downloadNum: 1866
      },
      {
        sortName: '电影',
        title: '唐人街探案 II',
        downloadNum: 1866
      },
      {
        sortName: '电影',
        title: '唐人街探案 II',
        downloadNum: 1866
      },
      {
        sortName: '电影',
        title: '唐人街探案 II',
        downloadNum: 1866
      },
      {
        sortName: '电影',
        title: '唐人街探案 II',
        downloadNum: 1866
      }]
    }
  },
  mounted () {
    this.timer = setInterval(() => { // 更新小时时间
      this.time = moment().format('HH:mm:ss')
    }, 1000)
    this.watchTimer = setInterval(() => { // 更新监测时间
      this.watchTime += 0.1
    }, 360000)
  },
  beforeDestroy () { // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.watchTimer) {
      clearInterval(this.watchTimer)
    }
  },
  methods: {
    toPageBack () {
      this.$router.go(-1)
    }
  },
  computed: {
    date () {
      return moment().format('YYYY 年 MM 月 DD 日')
    }
  }
}
</script>

<style lang="scss" scoped>
tr:hover{
  background: #030237;
}
.back {
  background: #030237;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 18px;
  overflow-x: hidden;
  color: #5A95DA;

  .top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #4471A6;
    // background: #050297;
    border-bottom: 2px solid #4471A6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1400px;
    position: relative;

    div:first-child {
      position: relative;
      left: -3%;
    }

    img:nth-child(2) {
      width: 250px;
      height: 40px;
      margin-left: 2%;
    }

    img:nth-child(4) {
      width: 250px;
      height: 40px;
    }

    .title {
      width: 280px;
      /*background-image: url('../assets/winwatch/top2.png');*/
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
    }

    .time {
      width: 200px;
      height: 50px;
      line-height: 25px;
      display: flex;
      flex-direction: column;

      div {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        font-family: Digital;
      }
    }

    div:nth-child(6) {
      cursor: pointer;

      img {
        position: relative;
        top: 5px;
        margin-left: 5px;
      }
    }

    div:last-child {
      font-size: 12px;
      margin-left: 2%;
      cursor: pointer;
    }

    div:last-child:hover {
      color: cyan;
    }
  }

  .el-row {
    .item-left-top {
      width: 100%;
      height: 350px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: crimson;
      div {
        width: 26%;
        height: 280px;
        // background: cornflowerblue;
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        left: 1%;
      }

      div:first-child {
        width: 400px;
        height: 280px;
      }

      div:nth-child(2), div:last-child {
        animation: dh1 5s;
        -webkit-animation: dh1 5s; /* Safari and Chrome */
        div {
          width: 100%;
          display: flex;
          justify-content: center;
          text-align: center;
          font-family: digital;
        }

        div:nth-child(2) {
          font-size: 80px;
          padding: 30px 0;
          color: #D3EDFF;
        }

        div:nth-child(3), div:last-child {
          text-align: left;
          text-indent: 30px;
        }
      }
    }

    .item-left-bottom {
      width: 96%;
      height: 400px;
      border: 2px solid #0094FF;
      border-radius: 10px;
      margin: auto auto 30px;
      background-image: radial-gradient(#1A2D5E 5%, #000337 70%);
      display: flex;
      justify-content: center;
      align-items: center;
      animation: dh2 2s;
      -webkit-animation: dh2 2s; /* Safari and Chrome */
      animation-delay: 2s;
      animation-fill-mode: both;

      div {
        height: 380px;
        // background: crimson;
        margin: 0 10px;

        p {
          position: relative;
          top: 30px;
        }
      }

      div:first-child {
        width: 340px;
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
          position: relative;
          bottom: 8%;
          animation: dh4 2s;
          -webkit-animation: dh4 2s; /* Safari and Chrome */
          animation-delay: 3s;
          animation-fill-mode: both;
        }
      }

      div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .table1 {
        position: relative;
        top: 50px;
        border: 1px solid #5A95DA;
        font-size: 12px;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 5s;
        animation-fill-mode: both;
      }
    }

    .item-right {
      width: 90%;
      height: 700px;
      margin: 40px auto;
      border: 2px solid #0094FF;
      border-radius: 10px;
      background-image: linear-gradient(to top, #1A2D5E, #000337);
      animation: dh3 2s;
      -webkit-animation: dh3 2s; /* Safari and Chrome */
      animation-delay: 4s;
      animation-fill-mode: both;

      div {
        position: relative;
        left: 5%;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 6s;
        animation-fill-mode: both;
      }

      .table2 {
        border: 1px solid #5A95DA;
        font-size: 12px;
        margin: 30px auto;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 7s;
        animation-fill-mode: both;
      }

      p {
        padding-top: 40px;
        font-size: 15px;
        text-align: center;
      }

      p:first-child {
        padding-top: 20px;
        margin: 0;
      }
    }
  }
}
// 渐变效果
@keyframes dh1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 上移效果
@keyframes dh2{
  from {opacity: 0; position: relative;top: 100px;}
  to {opacity: 1; position: relative; top: 0;}
}

// 左移效果
@keyframes dh3 {
  from {
    opacity: 0;
    position: relative;
    left: 500px;
  }
  to {
    opacity: 1;
    position: relative;
    left: 0;
  }
}

// 缩放出现效果
@keyframes dh4 {
  from {
    opacity: 0;
    transform: scale(0, 0);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
</style>
-->
<template>
  <div class="usercenter_main">
    <h3 style="text-align: center;font-size: 30px">图书管理系统</h3>
    <div class="usercenter_card w">
      <div class="usercenter_sidebar">
        <div class="usercenter_sidebar_top">
          <div class="avatar"></div>
          <a href="#"></a>
          <div class="comefrom">江苏徐州</div>
        </div>
        <div class="usercenter_sidebar_bottom">
          <ul>
            <li><a href="#" class="p">个人资料</a></li>
            <li><a href="#">门店</a></li>
            <li class="line"><a href="#">收藏</a></li>
            <li class="help"><a href="#">客服帮助</a></li>
          </ul>
        </div>
      </div>
      <div class="usercenter_line"></div>
      <div class="usercenter_content">
        <div class="usercenter_content_title">个人资料</div>
        <nav class="tab_nav">
          <a href="#" class="p">个人信息</a>
          <a href="#">账号安全</a>
          <a href="#">绑定授权</a>
        </nav>
        <div class="clr"></div>
        <form action="" class="personal_form">
          <div class="form_label">账号</div>
          <div>
            <div class="form_label s1">头像</div>
            <div class="avatar s1"></div>
          </div>
          <div class="form_label s1">昵称</div>
          <div class="s1"><input type="text" name="" id="" class="s2" placeholder=""></div>
          <div>
            <div class="form_label">性别</div>
          </div>
          <div>
            <div class="form_label s1">地区</div>
            <select name="" id="" class="s1 s2">
              <option value="江苏省">江苏省</option>
              <option value="北京市">北京市</option>
              <option value="上海市">上海市</option>
            </select>
            <select name="" id="" class="s1 s2">
              <option value="徐州市">徐州市</option>
            </select>
            <select name="" id="" class="s1 s2">
              <option value="泉山区">泉山区</option>
            </select>
            <div class="s1"><input type="text" name="" id="" placeholder="详细地址" class="s2"></div>
          </div>
          <hr>
          <div class="form_label s1">电话号码</div>
          <div class=""><input type="text" name="" id="" placeholder="" class="s2"></div>
          <div class="form_label">生日</div>
          <div class=""><input type="date" name="" id="" class="s2"></div>
          <div class="form_label">邮箱</div>
          <div class=""><input type="text" name="" id="" placeholder="" class="s2"></div>
          <div class="form_btn_part">
            <button type="submit" class="form_btn_part_btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<style>
*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  border-bottom: none;
}
.w{
  width: 1260px;
  margin: auto;
}
body{
  background-color:#f4f4f4;
}

.header_leftarea a img{
  float: left;
  height: 40px;
}
.header_rightarea span{
  color:#fff;
  line-height: 40px;
}

.header_giant .header_logo img{
  padding: 15px 0px 15px 100px;
  float: left;
  width: 175px;
  height: 50px;
}

.header_nav a{
  float: left;
  margin-left: 30px;
  line-height: 80px;
}

.header_rightarea .avatar{
  display:inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.header .header_contact a{
  background-color:rgba(0,0,0,.3);
  border-radius: 15px;
  font-size: 40px;
  color: #fff;
}
.header .header_contact .tip img{
  width: 100px;
  height: 100px;
}

.usercenter_main{
  height: 800px;
}
.usercenter_card{
  height:696px;
  background-color:#fff;
  position: relative;
  top: 45px;
}
.usercenter_sidebar{
  width: 20%;
  font-size: 14px;
  padding-top: 20px;
}
.usercenter_sidebar_top .avatar{
  background-image:url("../assets/1.jpg");
  width: 130px;
  height: 130px;
  background-size: 100%;
  border-radius: 100%;
  margin: 20px auto;
  /* position:absolute; */
}
.usercenter_sidebar_top{
  text-align: center;
  margin-bottom:30px;
}
.usercenter_sidebar_top .comefrom{
  color: #999;
  font-size: 12px;
}
.usercenter_sidebar_bottom{
  text-align: center;
}
.usercenter_sidebar_bottom ul li{
  margin-bottom: 10px;
}
.usercenter_sidebar_bottom ul li a{
  display: inline-block;
  width: 70%;
  height:40px;
  background-color: #fff;
  color: black;
  line-height: 40px;
  border-radius: 5px;
}
.usercenter_sidebar_bottom ul li .p{
  display: inline-block;
  width: 70%;
  height:40px;
  background-color: #333333;
  color: #fff;
  line-height: 40px;
  border-radius: 5px;
}
.usercenter_sidebar_bottom .line{
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20px;
}
.usercenter_sidebar_bottom .help{
  padding-top:10px ;
}
.usercenter_line{
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid #e9e9e9;
  left:20%;
}
.usercenter_content{
  position:absolute;
  left:22%;
  top: 0;
}
.usercenter_content {
  display: inline-block;
  width: 75%;
  padding: 35px;
  vertical-align: top;
  font-size: 12px;
}
.usercenter_content_title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 0;
  margin-bottom: 20px;
}
.usercenter_content .tab_nav{
  width: 100%;
  height: 40px;
}
.usercenter_content .tab_nav a{
  display: block;
  float: left;
  width: 33%;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color:#666;
  background-color: #f4f4f4;
}
.usercenter_content .tab_nav .p{
  width: 33%;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color:#0081e6;
  background-color: white;
  border-bottom: 3px solid #0081e6;
  font-weight: bold;
}
.usercenter_content .clr{
  clear: both;
}

.form_label {
  /* float: left; */
  color: #8c8c8c;
  display: block;
  /* width: 20%; */
  line-height: 40px;
  font-size: 14px;
  /* z-index: 1; */
  /* min-width: 80px; */
  width: 80px;
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
  padding-right: 5px;
}
.personal_form{
  margin-left: 14%;
}
.personal_form .avatar{
  width: 95px;
  height: 95px;
  background-size: 100%;
  border-radius: 100%;
  vertical-align: middle;
  /* position:absolute; */
}
.personal_form .s1{
  display: inline-block;
}
.personal_form .s2{
  height: 30px;
  border-radius: 5px;
  border:1px solid gray;
}
.personal_form .form_btn_part .form_btn_part_btn{
  width: 100%;
  height: 42px;
  background-color: #0081e6;
  border: none;
  color: #fff;
  margin-top: 10px;
}
</style>
